<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="销售订单号" name="销售订单号"
      [(ngModel)]="fifter.SaleOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料编码" [(ngModel)]="fifter.PartNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料名称" [(ngModel)]="fifter.PartName">
    <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter()"><i
        class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div>
    <d-button class="mt-3" (btnClick)="setDeliveryDate()"><i
      class="icon icon-filter-o me-2"></i>批量设置计划时间</d-button>
  </div>
  <div class="mt-3">
    <d-data-table [lazy]="true" [dataSource]="tableData" [scrollable]="true" [fixHeader]="true"
      [maxHeight]="tableheight" [resizeable]="true" [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true"
      [colDraggable]="true" [tableWidthConfig]="tableWidthConfig" (checkAllChange)="getCheckedRows()"
      (rowCheckChange)="getCheckedRows()">
      <thead dTableHead [checkable]="true">
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [fixedLeft]="colOption.fixedLeft">{{
            colOption.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [fixedLeft]="'0px'">
              <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedLeft]="'80px'">
              <span dTooltip [content]="rowItem?.saleOrderNum">{{ rowItem?.saleOrderNum }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.partNum">{{ rowItem?.partNum }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.partName">{{ rowItem?.partName }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partType">{{ rowItem.partType }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partUOM">{{ rowItem.partUOM }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.quantity">{{ rowItem.quantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="(rowItem.quantity - rowItem.soldQuantity - rowItem.produceQuantity).toString()">{{ rowItem.quantity - rowItem.soldQuantity - rowItem.produceQuantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <input type="text" dTextInput name="生产数量" [(ngModel)]="rowItem.productionQuantity">
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <div class="date">
                <d-datepicker-pro [format]="'y-MM-dd HH:mm:ss'" [appendToBody]="true"
                  [(ngModel)]="rowItem.jobOrderPlanStartDate" name="生产计划开始时间" [maxDate]="rowItem.jobOrderPlanEndDate"
                  [showTime]="true">
                </d-datepicker-pro>
              </div>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <div class="date">
                <d-datepicker-pro [format]="'y-MM-dd HH:mm:ss'" [appendToBody]="true"
                  [(ngModel)]="rowItem.jobOrderPlanEndDate" name="生产计划结束时间" [minDate]="rowItem.jobOrderPlanStartDate"
                  [showTime]="true">
                </d-datepicker-pro>
              </div>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.priceWithTax">{{ rowItem.priceWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.amountWithTax">{{ rowItem.amountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.taxAmount">{{ rowItem.taxAmount }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.amountWithTax">{{ rowItem.amountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountPriceWithTax">{{ rowItem.discountPriceWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountAmountWithTax">{{ rowItem.discountAmountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountTaxAmount">{{ rowItem.discountTaxAmount }}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
      [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
